<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 一、定时器的执行顺序问题 

        /* 
        js里 2种类型的代码 ： 1.同步代码 （执行不需要时间的）
                             2. 异步代码 (执行需要时间的);
                             同步永远在异步之前；
                             同步代码 依次排队执行
                             异步代码 排队执行
        
        */
        // console.log(111);
        // setTimeout(function(){
        //     console.log(333);
        // })

        // setTimeout(function(){
        //     console.log(4444);
        // })
        // console.log(222)


        // 二 、定时器里的this问题 
        // 定时器里的this指向 window
        // 需要使用外部的this，就把外部的this保存起来
        // this问题 ：this 不要关注this的定义 ，需要关注this的调用

        // document.querySelector(".box").onclick = function () {
        //     // console.log(this);
        //     var that = this;  // 把外边的this保存起来
        //     setTimeout(function () {
        //         that.style.background = "blue";
        //         // console.log(this);
        //     }, 2000);
        // }

        // function fn(){
        //     console.log(this);
        // }
        // var obj = {
        //     fn:fn
        // }

        // // obj.fn();
        // var myfn = obj.fn;
        // myfn();  // window

        // function Person(name){
        //     this.name = name;
        // }
        // Person.prototype.fn = fn;

        // var  zhangsan = new Person("张三");
        // zhangsan.fn();


        // 三、可以通过 settimeout 模拟 setinterval

        //1. 间隔1s打印111，可以setinterval

        // setInterval(function(){
        //     console.log(111);
        // },1000)


        // 2.通过settimeout 间隔1s钟打印111；
        // function fn(){
        //     setTimeout(function(){
        //         console.log(1111)
        //         fn();
        //     }, 1000);
        // }
        // fn();

    </script>
</body>

</html>